
import { Popup } from "@antmjs/vantui";
import { View, Image, Text } from "@tarojs/components"
import { forwardRef } from "react";

import closeIcon from '@/assets/images/close-icon.png'
import phoneLogo from '@/assets/images/phone.png';


import useInitAction from "@/hooks/useInitAction";
import Taro from "@tarojs/taro";
import { showToast } from "@/common/util";


interface ChatDialog {
  show: boolean;
  wechat: string;
  mobile: string;

  handlePopStatus: (status) => void;

}
const ChatDialog: React.FC<ChatDialog> = forwardRef((props, ref) => {
  const { bottomSafeHeight } = useInitAction()
  const { handlePopStatus, show, wechat, mobile } = props;


  const handleCopy = () => {
    Taro.setClipboardData({
      data: `${wechat}`,
      success: () => {
        showToast('复制成功')
      }
    })
  }
  const handleCall = () => {

    Taro.makePhoneCall({
      phoneNumber: mobile,
      success: () => {
        handlePopStatus(false)
        //   setCallPhoneShow(false)
      },
    })
  }


  return (
    <Popup show={show} position="bottom" closeOnClickOverlay={true} onClickOverlay={() => handlePopStatus(false)} safeAreaInsetBottom={false}>
      <View className="box-border pt-48px px-42px" style={{ paddingBottom: bottomSafeHeight > 0 ? bottomSafeHeight + 'px' : 38 + 'px' }}>
        <View className="text-#161618 text-34px font-bold">
          用户联系方式
        </View>
        {wechat && <View className="mt-54px mx-auto w-692px h-92px flex items-center justify-center text-#fff rounded-10px bg-#8232E8 text-30px font-bold" onClick={handleCopy}>复制用户微信号</View>}

        <View className="mt-38px mx-auto w-692px h-92px flex items-center justify-center text-#333333 rounded-10px bg-#F5F5F5 text-30px font-bold" onClick={handleCall} >
          <Image src={phoneLogo} className="w-28px h-32px"></Image>

          <Text className="ml-6px">拔打用户电话</Text>
        </View>
        <View className="mt-42px text-24px text-#999 mx-auto text-center">通话双方会看到各自真实手机号，请注意保护隐私</View>


        <Image src={closeIcon} className="w-36px h-36px absolute right-40px top-48px" onClick={() => handlePopStatus(false)}></Image>

      </View>
    </Popup>
  )
})
export default ChatDialog